<!-- 患者模块 -->
<template>
    <div class="patient-profile">
      <h1>查询【{{ patient.name }}】患者档案</h1>
      
      <div class="profile-container">
        <!-- 基本信息列 -->
        <div class="column">
          <div class="field">
            <label>ID:</label>
            <span>{{ patient.id }}</span>
          </div>
          <div class="field">
            <label>姓名:</label>
            <span>{{ patient.name }}</span>
          </div>
          <div class="field">
            <label>身份证号:</label>
            <span>{{ patient.idNumber }}</span>
          </div>
          <div class="field">
            <label>电话:</label>
            <span>{{ patient.phone }}</span>
          </div>
          <div class="field">
            <label>性别:</label>
            <span>{{ patient.gender }}</span>
          </div>
          <div class="field">
            <label>出生年月:</label>
            <span>{{ patient.birthdate }}</span>
          </div>
          <div class="field">
            <label>地址信息:</label>
            <span>{{ patient.address }}</span>
          </div>
        </div>
  
        <!-- 医疗信息列 -->
        <div class="column">
          <div class="field">
            <label>过敏信息:</label>
            <span>{{ patient.allergy || '无' }}</span>
          </div>
          <div class="field">
            <label>血型:</label>
            <span>{{ patient.bloodType || '未填写' }}</span>
          </div>
          <div class="field">
            <label>身高:</label>
            <span>{{ patient.height || '未测量' }}</span>
          </div>
          <div class="field">
            <label>体重:</label>
            <span>{{ patient.weight || '未测量' }}</span>
          </div>
          <div class="field">
            <label>左眼视力:</label>
            <span>{{ patient.leftEye || '未检查' }}</span>
          </div>
          <div class="field">
            <label>右眼视力:</label>
            <span>{{ patient.rightEye || '未检查' }}</span>
          </div>
        </div>
  
        <!-- 系统信息列 -->
        <div class="column">
          <div class="field">
            <label>创建时间:</label>
            <span>{{ patient.createTime }}</span>
          </div>
          <div class="field">
            <label>更新时间:</label>
            <span>{{ patient.updateTime }}</span>
          </div>
          <div class="field">
            <label>紧急联系人:</label>
            <span>{{ patient.emergencyContact || '未填写' }}</span>
          </div>
          <div class="field">
            <label>联系人电话:</label>
            <span>{{ patient.emergencyPhone || '未填写' }}</span>
          </div>
          <div class="field">
            <label>最后登录时间:</label>
            <span>{{ patient.lastLogin || '无记录' }}</span>
          </div>
        </div>
      </div>
  
      <button class="cancel-btn" @click="handleCancel">取消</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        patient: {
          id: "HZ1806571182749777920",
          name: "唐军鹏",
          idNumber: "520324194601237984",
          phone: "18873596069",
          gender: "男",
          birthdate: "2015-06-18",
          address: "湖南永州",
          allergy: "",
          bloodType: "",
          height: "",
          weight: "",
          leftEye: "",
          rightEye: "",
          createTime: "2024/6/28 14:11:49",
          updateTime: "2024/6/28 14:11:49",
          emergencyContact: "",
          emergencyPhone: "",
          lastLogin: ""
        }
      };
    },
    methods: {
      handleCancel() {
        // 取消操作，可自行扩展
        this.$router.back();
      }
    }
  };
  </script>
  
  <style scoped>
  .patient-profile {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  h1 {
    color: #333;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 25px;
  }
  
  .profile-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 30px;
  }
  
  .column {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .field {
    margin-bottom: 15px;
    display: flex;
    align-items: baseline;
  }
  
  label {
    color: #666;
    min-width: 100px;
    margin-right: 15px;
    font-weight: 500;
  }
  
  span {
    color: #333;
    flex: 1;
    word-break: break-word;
  }
  
  .cancel-btn {
    display: block;
    margin: 20px auto 0;
    padding: 10px 40px;
    background-color: #ff4d4f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  
  .cancel-btn:hover {
    opacity: 0.8;
  }
  </style>